<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>手机注册</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
">
    <link rel="stylesheet" th:href="@{/wxui/lib/weui.min.css}">
    <link rel="stylesheet" th:href="@{/wxui/css/jquery-weui.css}">
    <link rel="stylesheet" th:href="@{/wxui/css/style.css}">
    <link rel="stylesheet" th:href="@{/wxui/lib/example.css}"/>
    <script type="text/javascript" th:src="@{/frame/layui/layui.js}"></script>
</head>
<body ontouchstart>
<!--主体-->
<header class="wy-header">
    <div class="wy-header-icon-back"><span></span></div>
    <div class="wy-header-title">手机注册</div>
</header>
<div class="weui-content">
    <form id="userForm">
        <div class="weui-cells weui-cells_form wy-address-edit">
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label wy-lab">用户名</label></div>
                <div class="weui-cell__bd"><input class="weui-input" id="loginname" name="loginname" type="text"></div>
                <div id="nameMsg" hidden="hidden" code="200"></div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label wy-lab">设置密码</label></div>
                <div class="weui-cell__bd"><input class="weui-input" id="loginpwd" name="loginpwd" type="password">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label wy-lab">确认密码</label></div>
                <div class="weui-cell__bd"><input class="weui-input" id="loginpwd2" name="loginpwd2" type="password">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label wy-lab">姓名</label></div>
                <div class="weui-cell__bd"><input class="weui-input" name="username" type="text"></div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label wy-lab">邮箱</label></div>
                <div class="weui-cell__bd"><input class="weui-input" id="email" name="email" type="text"></div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label wy-lab">年龄</label></div>
                <div class="weui-cell__bd"><input class="weui-input" id="age" name="age" type="text"></div>
            </div>
            <div class="weui-cell weui-cell_vcode">
                <div class="weui-cell__hd"><label class="weui-label wy-lab">手机号</label></div>
                <div class="weui-cell__bd"><input class="weui-input" name="phone" id="phone" type="text"
                                                  placeholder="请输入手机号"></div>
                <div id="phoneMsg" hidden="hidden"></div>
                <div class="weui-cell__ft">
                    <a class="weui-vcode-btn vcode">获取验证码</a>
                </div>
            </div>
            <div class="weui-cell weui-cell_vcode">
                <div class="weui-cell__hd"><label class="weui-label wy-lab">验证码</label></div>
                <input type="hidden" name="bizId" id="bizId"/>
                <div class="weui-cell__bd"><input class="weui-input" name="outId" id="outId" type="text"
                                                  placeholder="请输入验证码"></div>
                <div class="weui-cell__ft">
                    <span class="weui-vcode-btn">输入验证码</span>
                </div>
            </div>
            <div class="weui-cells__title">性别</div>
            <div class="weui-cells weui-cells_checkbox">
                <label class="weui-cell weui-check__label">
                    <div class="weui-cell__hd">
                        <input type="radio" class="weui-check" value="1" name="sex" checked="checked"/>
                        <i class="weui-icon-checked"></i>
                    </div>
                    <div class="weui-cell__bd">
                        <p>男</p>
                    </div>
                </label>
                <label class="weui-cell weui-check__label" for="s12">
                    <div class="weui-cell__hd">
                        <input type="radio" name="sex" value="0" class="weui-check"/>
                        <i class="weui-icon-checked"></i>
                    </div>
                    <div class="weui-cell__hd">
                        <p>女</p>
                    </div>
                </label>
            </div>
        </div>
    </form>
    <label for="weuiAgree" class="weui-agree">
        <input id="weuiAgree" type="checkbox" class="weui-agree__checkbox" checked="checked">
        <span class="weui-agree__text">阅读并同意<a href="javascript:void(0);">《注册协议》</a></span>
    </label>
    <div class="weui-btn-area"><a href="javascript:;" class="weui-btn weui-btn_warn">注册并登陆</a></div>
   <!-- <div class="weui-cells__tips t-c font-12">登陆账号为您输入的手机号码</div>-->
    <div class="weui-cells__tips t-c pd-10"><a href="xieyi.html" class="weui-cell_link font-12">查看注册协议</a></div>

</div>
<script th:src="@{/wxui/lib/jquery-2.1.4.js}"></script>
<script th:src="@{/wxui/lib/fastclick.js}"></script>
<script type="text/javascript" th:src="@{/wxui/js/jquery.Spinner.js}"></script>
<script th:src="@{/wxui/js/jquery-weui.js}"></script>
<script>
    $(function () {
        FastClick.attach(document.body);
        $(".wy-header-icon-back").click(function () {
            window.history.back();
        });
    });

    /**
     * 表单提交
     */
    $(".weui-btn_warn").click(function () {

        //用户验证
        if ($("#loginname").val() == "") {
            $.toast("用户名不能为空", "text");
            return false;
        } else if ($("#nameMsg").attr("code") != 200) {
            $.toast("用户名已存在", "text");
            return false;
        }
        //密码验证
        if ($("#loginpwd").val() == "" && $("#loginpwd2").val() == "") {
            $.toast("密码不能为空", "text");
            return false;
        } else if ($.trim($("#loginpwd").val()).length < 6) {
            $.toast("密码不能少于6位", "text");
            return false;
        } else if ($("#loginpwd").val() != $("#loginpwd2").val()) {
            $.toast("两次密码输入不一致", "text");
            return false;
        }

        //邮箱验证
        if ($.trim($('#email').val()).length == 0) {
            $.toast("邮箱不能为空", "text");
            return false;
        } else if (!$('#email').val().match(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/)) {
            $.toast("邮箱格式错误", "text");
            return false;
        }

        //年龄验证
        if ($.trim($('#age').val()).length == 0) {
            $.toast("年龄不能为空", "text");
            return false;
        } else if (!$('#age').val().match(/^\+?[1-9][0-9]*$/)) {
            $.toast("年龄只能为整数", "text");
            return false;
        }
        //手机号验证
        var myreg = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0]{1})|(15[0-3]{1})|(15[5-9]{1})|(18[0-9]{1}))+\d{8})$/;
        if ($.trim($('#phone').val()).length == 0) {
            $.toast("手机号不能为空", "text");
            return false;
        } else if ($.trim($('#phone').val()).length != 11) {
            $.toast("请输入11位手机号", "text");
            return false;
        } else if (!myreg.test($('#phone').val())) {
            $.toast("请输入正确手机号", "text");
            return false;
        } else if ($("#phoneMsg").attr("code") != '200') {
            $.toast("手机已注册", "text");
            return false;
        }
        //验证码验证
        if ($.trim($('#outId').val()).length == 0) {
            $.toast("验证码不能为空", "text");
            return false;
        } else if ($.trim($('#outId').val()).length != 5) {
            $.toast("请输入5位验证码", "text");
            return false;
        }


        $.ajax({
            type: "post",
            url: "/user/frontstage/registUser",
            data: $("#userForm").serialize(),
            // "bizId":$("#bizId").val(),
            // "outId":$("#outId").val()
            dataType: "json",
            success: function (data) {
                if (data.code == 200) {
                    $.toast(data.msg);
                    setTimeout('location.href = "/index"', 1000);
                } else {
                    $.toast(data.msg, "text");
                }
            }
        })
    })
    /**
     * 用户名验证
     */
    $("#loginname").blur(function () {
        $.ajax({
            type: "post",
            url: "/user/verifyLoginName",
            dataType: 'json',
            data: {"loginname": $("#loginname").val()},
            success: function (data) {
                $("#nameMsg").attr("code", data.code);
                if (data.code == 500) {
                    $.toast("用户名已存在", "text");
                }
            }
        });
    });

    $("#phone").blur(function () {
        $.ajax({
            type: "post",
            url: "/user/verifyLoginName",
            dataType: 'json',
            data: {"phone": $("#phone").val()},
            success: function (data) {
                $("#phoneMsg").attr("code", data.code);
                if (data.code == 500) {
                    $.toast("手机已注册", "text");
                }
            }
        });
    });

    /**
     * 获取短信验证码
     */
    $(".vcode").click(function () {
        $.ajax({
            type: "post",
            url: "/user/frontstage/getDynamicNum",
            data: {
                "phone": $("#phone").val()
            },
            dataType: "json",
            success: function (data) {
                if (data.code == 200) {
                    $.toast(data.msg, "text");
                    $("#bizId").val(data.data.bizId)
                } else {
                    $.toast(data.msg, "text");
                }
            }
        })
    })
</script>

</body>
</html>
